<LayoutTableSmall >
    <template slot="top"></template>
    <template slot="other">
        <el-dialog :close-on-click-modal="false"  :close-on-press-escape="false"  :title="mixinEdit_editTitle" width="500px" :visible.sync="mixinEdit_editVisible"
            :before-close="function(){mixinEdit_editBoxClose('editForm')}" append-to-body>


            <el-form ref="editForm" :model="form" label-width="100px"
                label-position="left">

                <el-form-item label="角色名称" prop="name">
                    <el-input v-model="form.name" maxlength="10" show-word-limit></el-input>
                </el-form-item>
                <el-form-item label="权限" prop="authMenuIdLst">
                    <el-tree :data="listCanAuthMenu" show-checkbox node-key="id" ref="roleTree"
                    :props='{
                        children: "children",
                        label: "menuTitle",
                    }' default-expand-all  :default-checked-keys="form.authMenuIdLst">
                </el-tree>
                </el-form-item>
                

            </el-form>
            <div slot="footer">
                <el-row>
                    <el-col :span="12" style="text-align: left;">
                        <el-button @click="mixinEdit_resetForm('editForm')">重 置</el-button>
                    </el-col>
                    <el-col :span="12">
                        <el-button @click="mixinEdit_editBoxClose('editForm')">取 消</el-button>
                        <el-button type="primary" @click="mixinEdit_editFormSubmit({model:'form',ref:'editForm'})">确
                            定</el-button>
                    </el-col>
                </el-row>
            </div>
        </el-dialog>
    </template>
    <template slot="search">
        <el-form :inline="true" label-position="left" label-width="80px" :model="mixinTable_tableSearchData"
            class="demo-form-inline">
            <el-form-item label="角色名称">
                <el-input clearable v-model="mixinTable_tableSearchData.name" placeholder="请输入"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button @click="mixinTable_getTable('tableData', 1)">查询</el-button>
            </el-form-item>
        </el-form>
    </template>
    <template slot="function">
        <el-button type="primary" @click="mixin_editBoxOpen({type:'add',model:'form'})">添加角色</el-button>
    </template>
    <template slot="table">

        <el-table :data="tableData" border style="width: 100%;" :ref="mixinPage_vueName+'TableSmall'" height="100%" row-key="id"
            @selection-change="mixinTable_handleSelectionChangeTableSmall" :tree-props="{children: 'children'}">
            <el-table-column type="selection" width="50" align="center"></el-table-column>
            <el-table-column type="index" width="50" :index="mixinTable_indexMethod" align="center" label="#"></el-table-column>
            <el-table-column prop="name" label="角色名称"></el-table-column>
            <el-table-column prop="adminCount" label="用户数量"></el-table-column>

            <el-table-column label="操作" width="390">
                <template slot-scope="scope">
                    <el-button @click="mixin_editBoxOpen({type:'update',model:'form',scope:scope})">编辑</el-button>
                    <el-button type="danger" plain @click="mixinTable_selectTableDeleteData([scope.row])">删除</el-button>
                </template>
            </el-table-column>

        </el-table>

    </template>

    <template slot="options">
        <el-button :disabled="mixinTable_selectTableData.length<=0"
            @click="mixinTable_selectTableDeleteData()">删除已选</el-button>
        <el-button :disabled="mixinTable_selectTableData.length<=0" @click="mixinTable_clearSelectionChangeTableSmall()">取消选择
        </el-button>
    </template>
    <template slot="page">
    </template>
</LayoutTableSmall>
